<template>
  <div class="box-main2">

    <div class="box-line2">

      <div class="box-numb">
        <div class="numb-info info2">
          <div class="numb">{{buzhiZuoyeCount}} 份</div>
          <div class="info">作业总数</div>
          <div class="icon"><i class="iconfont icon-homework"></i></div>
        </div>
      </div>
      <div class="box-numb">
        <div class="numb-info info4">
          <div class="numb">1425 人</div>
          <div class="info">学生人数</div>
          <div class="icon"><i class="iconfont icon-ic_student"></i></div>
        </div>
      </div>
      <div class="box-numb">
        <div class="numb-info info3">
          <div class="numb"> 2333 人次</div>
          <div class="info">完成作业人次</div>
          <div class="icon"><i class="iconfont icon-homework_wancheng"></i></div>
        </div>
      </div>
      <div class="box-numb">
        <div class="numb-info info1">
          <div class="numb">97.3%</div>
          <div class="info">作业完成率</div>
          <div class="icon"><i class="iconfont icon-bili"></i></div>
        </div>
      </div>
    </div>
    <div class="box-line1">
      <div style="display: flex">
        <div style="width: 400px;height: 300px;border:solid 1px #cccccc;">
          <div class="box-pie1" style=" height: 300px;" ref="pie1">
          </div>
        </div>
        <div style="flex:1;height: 300px;padding-left:10px;">
          <div class="box-pie1" style=" height: 300px;" ref="pie2">
          </div>
        </div>

      </div>

    </div>


  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed:{
      loginUserInfo(){
        return this.$store.state.loginUserInfo;
      },

    },
    data() {
      return {
        buzhiZuoyeCount: 0,

        pie1Data: [],

      };
    },
    mounted() {
      this.initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/index') {

          }

        }, immediate: true
      },
    },
    methods: {

      initData(){

        this._loadBuzhiZuoyeCount();

        this._initPie1Data();
        
        this._initPie2Option();
      },
      _loadBuzhiZuoyeCount(){
        let url1 = this.settings.apiUrl + '/index_statist/get_buzhi_zuoye_count';
        let d1 = {};

        request.post(url1, d1).then((d1r) => {
          if (d1r.code === 0) {
            this.buzhiZuoyeCount = d1r.data;
          }
        })
      },
      _initPie1Data(){
        let url1 = this.settings.apiUrl + '/index_statist/get_pie1_data';
        let d1 = {};

        request.post(url1, d1).then((d1r) => {
          if (d1r.code === 0) {
            this.pie1Data = d1r.data;

            this._initPie1Option();
          }
        })
      },
      _initPie1Option(){
        let myChart = this.$echarts.init(this.$refs.pie1);

        myChart.setOption({
          series : [
            {
              name: '完成情况',
              type: 'pie',
              radius: '55%',
              data:this.pie1Data
            }
          ]
        });


      },
      _initPie2Option(){
        let myChart = this.$echarts.init(this.$refs.pie2);

        myChart.setOption({
          title: {
            text: '作业完成量统计'
          },
          tooltip: {},
          legend: {
            data:['完成量']
          },
          xAxis: {
            data: ["张三丰","周芷若","谢逊","玄冥二老","杨潇","郭靖","尹向平"]
          },
          yAxis: {},
          series: [{
            name: '完成量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,22]
          }]
        });


      }

    }

  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    height: 100%;
    background-image: url("/static/images/flow/bg2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-line1{
    padding-bottom: 20px;
    height:100%;
  }

  .box-echarts-flow1{
    width: 100%;
    height:100%;
    .echarts-flow1{
      height: 100%;
    }
  }

  .box-line2{
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    padding-bottom: 20px;

    .box-numb{
      width: 250px;
      padding-right:20px;

      .numb-info{
        position: relative;

        height: 90px;

        .numb{
          position: absolute;
          z-index: 100;
          left: 10px;
          top: 10px;
          color: #fff;
          font-size: 26px;
        }
        .info{
          position: absolute;
          z-index: 100;
          left: 10px;
          bottom: 10px;
          color: #d3d3d3;
          font-size: 13px;
        }
        .icon>>>{
          position: absolute;
          z-index: 100;
          right: 10px;
          top: 20px;

          .iconfont{
            font-size:48px;
          }
        }

      }
    }

    .info1{
      background-color: #5daf34;
      .icon>>>{
        color: #85ce61;
      }
    }
    .info2{
      background-color: #cf4236;
      .icon>>>{
        color: #af4236;
      }
    }
    .info3{
      background-color: #3a8ee6;
      .icon>>>{
        color: #356ec6;
      }
    }
    .info4{
      background-color:	#0000CD;
      .icon>>>{
        color: 	#0055CD;
      }
    }

  }






  .box-blue1{
    background-color: #07488399;
  }

</style>
